<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<body>
    <div id="app">
      <p v-lower-case="text"></p>
      <p v-lower-case="message"></p>

      <p v-upper-case="text"></p>
      <p v-upper-case="message"></p>
    </div>
    <script src="./js/vue.js "> </script>
    <script>
      // 全局指令
      Vue.directive("upper-case", (el,binding) => {
                                    //让字符串转为大写
        el.textContent = binding.value.toUpperCase();
      });
      const vm = new Vue({
        data:{
          text:"Hello World",
          message:"Hello Go go go",
        },

        // 局部指令(基本不用)
        directives:{
          "lower-case"(el,binding){
            // console.log(el,binding);
            el.textContent = binding.value.toLowerCase();
          }
        }
      });

      vm.$mount("#app");
    </script>
</body>
</html>